<script setup>
import { useI18n } from "vue-i18n";
import { defineProps, inject, ref } from "vue";
import HighlightWords from "vue-highlight-words";
const { t } = useI18n();
const props = defineProps({
  cateList: {
    type: Array,
    default: [],
  },
  recommendOptions: {
    type: Array,
    default: [
      {
        label: "weeklyHot",
        value: 1,
      },
      {
        label: "monthlyHot",
        value: 2,
      },
      {
        label: "yearlyHot",
        value: 3,
      },
    ],
  },
  handleSearch: {
    type: Function,
  },
});
const searchText = ref("");
</script>
<template>
    <div class="w-full bg-white p-5 mb-5 rounded-2xl">
      <div class="flex overflow-hidden w-full">
        <a-auto-complete
          v-model="searchText"
          @search="handleSearch"
          :allow-clear="true"
          :strict="true"
          :placeholder="t('searchPlaceholder')"
          class="bg-white rounded-tl-3xl rounded-bl-3xl border-tlb-primary pt-1 pb-1"
        >
          <template #option="{ data }">
            <div class="flex items-center text-xs pt-3 pb-3">
              <span class="text-gray-500">手机号:&nbsp; </span>
              <highlight-words
                :search-words="[searchText]"
                :text-to-highlight="data.raw.label"
                highlight-class="text-sm"
              />
              <span class="ml-2 text-gray-500">姓名:wayen zhuo</span>
            </div>
          </template>
        </a-auto-complete>
        <a-button
          type="primary"
          style="height: 41px"
          class="pl-5 pr-5 rounded-tr-3xl rounded-br-3xl"
        >
          <icon-search size="18" />
        </a-button>
      </div>
      <div class="w-full mt-3 flex">
        <a-select :bordered="false" :placeholder="t('categoryPlaceholder')">
          <a-option v-for="(option, index) in cateList" :key="index">{{
            option.cate_name
          }}</a-option>
        </a-select>
        <a-select :bordered="false" :placeholder="t('hotSales')">
          <a-option
            v-for="(option, index) in recommendOptions"
            :key="index"
            :value="option.value"
            >{{ t(option.label) }}</a-option
          >
        </a-select>
      </div>
    </div>
</template>
<style scoped lang="less"></style>
